<template>
  <el-card>
    <el-form :model="userInfo" :rules="rules" ref="formRef" label-width="auto">
      <el-form-item label="userId" prop="userId">
        <el-input v-model="userInfo.userId" placeholder="Please input userId" />
      </el-form-item>
      <el-form-item label="roomId" prop="roomId">
        <el-input v-model="userInfo.roomId" placeholder="Please input roomId" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onEnterClick(formRef)"> 进入房间 </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import to from 'await-to-js';
import { reactive, ref } from 'vue';
import {
  ElMessage,
  ElForm,
  ElFormItem,
  ElInput,
  ElButton,
  ElCard,
  type FormInstance,
  type FormRules,
} from 'element-plus';
import router from '../router';
interface IUserInfo {
  userId: string;
  roomId: string;
}

const formRef = ref<FormInstance>();

const userInfo = reactive<IUserInfo>({
  userId: '',
  roomId: '',
});

const rules: FormRules<IUserInfo> = {
  userId: { required: true, message: 'Please input userId', trigger: 'blur' },
  roomId: { required: true, message: 'Please input roomId', trigger: 'blur' },
};

const onEnterClick = async (formRef: FormInstance | undefined) => {
  const [err] = await to(formRef!.validate());
  if (err) {
    return ElMessage.error('请输入userId与roomId');
  }
  const { userId, roomId } = userInfo;
  router.push({ path: '/home', query: { userId, roomId } });
};
</script>

<style scoped></style>
